<!--
* @description 
* @fileName header.vue
* @author huangyu
* @date 2023/02/15 09:07:03
!-->
<template>
    <div>
        <el-row>
            <el-col :span="3">
                <router-link to="/"><div class="zx-logo"></div></router-link>
            </el-col>
            <el-col :span="12">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <!-- 前台功能 -->
                    <el-menu-item index="/game/zx/bossList"><router-link :to="'/game/zx/bossList'">boss记录</router-link></el-menu-item>
                    <el-menu-item index="/game/zx/exchange"><router-link :to="'/game/zx/exchange'">易宝天行交易所</router-link></el-menu-item>
                    <el-menu-item index="/game/zx/booth">我登记的物品</el-menu-item>
                    <el-menu-item index="/game/zx/bbs"><router-link :to="'/game/zx/bbs'">东方交流论坛</router-link></el-menu-item>
                    <el-menu-item index="/game/zx/gameInfo"><router-link :to="'/game/zx/gameInfo'">游戏介绍</router-link></el-menu-item>
                    <!-- <el-menu-item index="/game/zx/nanyu"><router-link :to="'/game/zx/nanyu'">南雨辅助工具库</router-link></el-menu-item> -->
                    <!-- <el-menu-item index="/game/zx/ranking" v-if="token&&powerClan"><router-link :to="'/game/zx/ranking'">东方排行榜</router-link></el-menu-item> -->
                    <!-- <el-menu-item index="/game/zx/order">我买到/卖出物品</el-menu-item> -->
                    <!--  -->
                    <el-menu-item index="/admin/zx/index" v-if="token&&(powerRoleAdmin||powerRoleGM||powerClan)"><router-link :to="'/admin/zx/index'">后台功能管理</router-link></el-menu-item>
                    <el-menu-item index="/game/zx/bbs/zuimeiZX'" v-if="powerBBS"><router-link :to="'/game/zx/bbs/zuimeiZX'">最美诛仙</router-link></el-menu-item>
                    <!-- <el-menu-item><el-button @click="clickRegiser">注册</el-button></el-menu-item> -->
                </el-menu>
                
            </el-col>
            <el-col :span="5">
                <div v-if="!token">
                    <el-button style="margin-top:13px;" type="primary" size="small" @click="clickLogin">登录</el-button>
                    <!-- <el-button style="margin-top:13px;" type="primary" size="small"><router-link :to="'/game/zx/userRealAdd'" style="color:#fff;">账号申请</router-link></el-button> -->
                </div>
                <div>&nbsp;</div>
            </el-col>
            <el-col :span="4">
                <div style="line-height:60px;float:right;margin-right:20px;" v-if="token">
                    <router-link to="/game/zx/user/setting" style="margin-right:20px;" class="color_blue">【{{gameName?gameName:'游戏名称未填写'}}】</router-link>
                    <a href="javascript:;" @click="loginOut">
                        <i class="el-icon-switch-button"></i> [退出] 
                    </a>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="请先登录" :visible.sync="dialogLogin" width="450px" v-dialogDrag>
            <vLogin @onLogin="onLogin" :routerLink="routerLink"></vLogin>
        </el-dialog>
    </div>
</template>

<script>
import vLogin from '@/page/game/zhuxian/login.vue'
import * as types from "@/store/types";
export default {
    components: {vLogin},
    data() {
        return {
            gameName: "",
            dialogLogin: false,
            dialogRegister: false,

            activeIndex: "",
            token: this.$store.state.token,
            routerLink: "",

            powerRoleAdmin: this.$power.roleAction('管理员'),
            powerRoleGM: this.$power.roleAction('GM'),
            powerClan: this.$power.roleAction('clan'),
            powerBBS: this.$power.roleAction('bbs'),
        }
    },
    mounted() {
        if(this.$store.state.user){
            this.gameName = this.$store.state.user.gameName
        }
    },
    methods: {
        clickLogin(){
            this.dialogLogin = true
        },
        onLogin(){
            this.dialogLogin = false
        },
        
        handleSelect(key){
            if(key=='/game/zx/booth'||key=='/game/zx/order'){
                if(this.token){
                    this.$router.push({
                        path: key,                                    
                    });
                }else{
                    this.dialogLogin = true
                    this.routerLink = key
                }
            }
        },
        loginOut(){
            this.$store.commit(types.LOGOUT);
            this.$router.push({ path: "/" });
            this.$message("已退出！")
            this.$router.go(0)
        },
    },
}
</script>

<style scoped>

</style>